import "./index.css";
import React from "react";
import GxlTableLefterRowCell from "./RowCell";
import { ScrollSyncPane } from "react-scroll-sync";
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTableLefter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCell: "",
    };
  }

  buildLefterRows() {
    const { sheetStore,tableTop } = this.props;
    const currentSheetIndex = sheetStore.currentSheetIndex;
    const currentSheet = sheetStore.getCurrentSheet();
    let i = 0;
    const array = [];
    for (; i < currentSheet.defaultShowRowCount; i++) {
      array.push(
        <GxlTableLefterRowCell
          key={`lefter_row_${i}`}
          sheet={currentSheetIndex}
          tableTop={tableTop}
          row={i}
        />
      );
    }
    return array;
  }
  render() {
    return (
      <ScrollSyncPane group="v">
        <div className="gxl-table-lefter">{this.buildLefterRows()}</div>
      </ScrollSyncPane>
    );
  }
}

export default GxlTableLefter;
